<template>
  <div class="userInfo">
    <div class="rowBox">
      <div class="changeAvatar userBlock" style="margin: 0;">
        <div class="avatar_box">头像</div>
        <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <span class="avatarTit">更换头像</span> -->
      </div>
      <div class="flex_lzy">
        <div class="mid">
          <div class="userNameBox userBlock">
            <label>账号</label>
            <el-input v-model="infoData.cardNumber" placeholder="请输入账号"></el-input>
          </div>
          <div class="userNameBox userBlock">
            <label>密码</label>
            <el-input disabled type="password" v-model="infoData.cardSecretKey" placeholder="请输入密码"></el-input>
            <a class="a_box" @click="editPass">修改密码</a>
          </div>
          <div class="userNameBox userBlock">
            <label>昵称</label>
            <el-input v-model="userInfo.name" placeholder="请输入昵称"></el-input>
          </div>
          <div class="userNameBox userBlock">
            <label>性别</label>
            <el-radio v-model="userInfo.sex" label="男">男</el-radio>
            <el-radio v-model="userInfo.sex" label="女">女</el-radio>
          </div>

        </div>
        <div class="mid">
          <div class="birthTimeBox userBlock mar_left" style="margin-left:100px">
            <label>出生日期</label>
            <el-date-picker v-model="userInfo.birthday" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div class="bindPhoneBox userBlock mar_left" style="height: 40px;">
            <label>绑定手机号</label>
            <div class="phoneInfo">
              <span>{{ userInfo.phone }}</span>
              <a class="a_box" @click="$router.push('/changePhone')">{{userInfo.phone?'更换':'绑定手机号 '}}</a>
            </div>
          </div>
          <div style="margin-left:135px" class="userNameBox userBlock mar_left">
            <label>单位</label>
            <el-input v-model="infoData.unitName" placeholder="请输入单位"></el-input>
          </div>
        </div>
      </div>
    </div>
    <el-button class="userInfoSave" :loading="loading" @click="saveUserInfo">保存</el-button>
    <el-dialog @close="closeDialo" title="修改密码" :visible.sync="editPassDialog" width="500px">
      <div class="edit_pass">
        <div class="">
          <el-form :model="changePassword" ref="formPassword" :rules="rulesPassword" label-width="80px">
            <el-form-item label="原密码" prop="password">
              <el-input v-model="changePassword.password" placeholder="请输入原密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" v-model="changePassword.newPassword" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="newPassword2">
              <el-input type="password" v-model="changePassword.newPassword2" placeholder="确认密码"></el-input>
            </el-form-item>

          </el-form>
        </div>
        <span slot="footer" class="dialog-footer" style="display: flex;
    justify-content: center;">
          <el-button class="btns" @click="editPassDialog = false" v-throttle>取消</el-button>
          <el-button class="btns pay" type="primary" @click="editPassword" v-throttle>修改</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserInfo,
  changeUserInfo,
  changeUserInfo2,
  getUserInfo2,
  updatePasswordAPI
} from '@/api/user/user.js'
import { upload } from '@/api/upload.js'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'userInfo',
  data() {
    return {
      rulesPassword: {
        password: [{ required: true, message: '原密码为必填项', trigger: 'blur' }],
        newPassword: [{ required: true, message: '新密码为必填项', trigger: 'blur' }],
        newPassword2: [{ required: true, message: '确认密码为必填项', trigger: 'blur' }]
      },
      changePassword: {
        password: '',
        newPassword: '',
        newPassword2: ''
      },
      editPassDialog: false,
      infoData: {
        unitName: '',
        cardNumber: '',
        cardSecretKey: ''
      },
      userName: 'Curmudgeons',
      gender: '1',
      birthTime: '',
      userInfoData: {},
      avatarImg: '',
      action: upload,
      loading: false
    }
  },
  created() {
    this.getUserInfo2Data()
  },
  computed: {
    ...mapGetters([
      'userInfo' // 用户信息
    ])
  },
  methods: {
    ...mapMutations({
      setUserInfo: 'SET_USERINFO', // 修改用户信息
      setAVATR: 'SET_AVATAR' // 修改用户信息
    }),
    closeDialo() {
      this.changePassword = {
        password: '',
        newPassword: '',
        newPassword2: ''
      }
    },
    editPassword() {
      this.$refs['formPassword'].validate(valid => {
        if (valid) {
          if (this.changePassword.newPassword != this.changePassword.newPassword2) {
            this.$message.warning('两次密码不一致')
            return
          }
          updatePasswordAPI(this.changePassword).then(res => {
            console.log(res)
            if (res.data.code == 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.editPassDialog = false
            } else {
              this.$message({
                message: res.data.message,
                type: 'error'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    editPass() {
      this.editPassDialog = true
    },
    async getUserInfo2Data() {
      const res = await getUserInfo2()
      const data = res.data.data
      this.infoData.unitName = data.unitName
      this.infoData.cardNumber = data.cardNumber
      this.infoData.cardSecretKey = data.cardSecretKey
    },
    async getUserInfoData() {
      const response = await getUserInfo()
      const res = response.data
      if (res.code === '200') {
        this.setUserInfo(res.data)
      } else {
        this.$message.error(res.message)
      }
    },
    async saveUserInfo() {
      this.loading = true
      let errMsg = ''
      if (!this.userInfo.name) {
        errMsg += ' 请输入昵称 '
      }
      if (!this.userInfo.birthday) {
        errMsg += ' 请输入生日 '
      }
      if (errMsg.length !== 0) {
        this.$message.error(errMsg)
        this.loading = false
        return
      }
      const response = await changeUserInfo({
        name: this.userInfo.name,
        sex: this.userInfo.sex,
        birthday: this.userInfo.birthday,
        headImage: this.userInfo.headImage
      })
      await changeUserInfo2({ ...this.infoData, userId: this.userInfo.buyerUserId })
      const res = response.data
      if (res.code === '200') {
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.getUserInfoData()
      }
      this.loading = false
    },
    // 上传头像
    handleAvatarSuccess(res) {
      this.setAVATR(res.data.url)
      this.$message({
        message: '上传成功，请保存修改！',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userInfo {
  max-width: 1000px;
  padding: 30px;
  border: 1px solid #e5e5e5;
  .rowBox {
    width: 900px;
    // height: 500px;
    // display: flex;
    // justify-content: space-between;
  }
  .changeAvatar {
    display: flex;
    width: 234px;
    height: 134px;
    position: relative;
    .avatar_box {
      width: 50px;
      font-weight: normal;
      font-size: 16px;
      color: #666;
    }
    .avatar {
      width: 100%;
      max-width: 120px;
      max-height: 120px;
    }
    .avatarTit {
      height: 30px;
      line-height: 30px;
      position: absolute;
      bottom: 0;
      font-size: 16px;
      background: rgba(84, 84, 84, 0.5);
      width: 100%;
      text-align: center;
      color: #ffffff;
      cursor: pointer;
    }
  }
  .mid {
    min-width: 230px;
    // margin: 0 20px;
    .userNameBox {
      >>> .el-input {
        width: 180px;
      }
    }
  }
  .userBlock {
    margin-top: 30px;
    display: flex;
    align-items: center;
    label {
      margin-right: 20px;
      font-weight: normal;
      font-size: 16px;
      color: #666666;
    }
  }
  .right {
    min-width: 230px;
    .bindPhoneBox {
      .phoneInfo {
        font-size: 16px;
        span {
          margin-right: 15px;
          text-decoration: underline;
          cursor: pointer;
        }
        span:nth-child(1) {
          color: #333333;
          text-decoration: none;
          cursor: default;
        }
        span:nth-child(2) {
          color: $mainGlod;
        }
        span:nth-child(3) {
          color: #666666;
        }
      }
    }
  }
  .userInfoSave {
    display: block;
    width: 200px;
    height: 50px;
    margin: 50px auto;
    padding: 0;
    line-height: 50px;
    background: #333333;
    border: 1px solid #333333;
    border-radius: 0px;
    text-align: center;
    color: $mainGlod;
    font-size: 16px;
    cursor: pointer;
    &:hover {
      color: #fff;
      background: $mainGlod;
      border: 1px solid $mainGlod;
    }
  }
}
.flex_lzy {
  display: flex;
  // align-content: center;
  // justify-content: space-between;
}
.mar_left {
  margin-left: 80px;
}
.a_box {
  color: #c5aa7b;
  font-size: 14px;
  margin-left: 15px;
}
</style>
